<template>
<!-- 总容器 -->
<div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>注册</p>
            <div></div>
        </header>
        <div class="top-ban"></div>
        <h1>欢迎注册</h1>
        <table>
            <tr>
                <td>手机号码</td>
                <td><input type="text" v-model="form.phone" placeholder="请输入手机号码"></td>
            </tr>
            <tr>
                <td>真实姓名</td>
                <td><input type="text" v-model="form.realname" placeholder="真实姓名便于查看体检报告"></td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input type="date" v-model="form.birthday"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" v-model="man_value" checked>男
                    <input type="radio" v-model="woman_value">女
                </td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td><input type="text" v-model="form.identitycard" placeholder="请输入身份证号"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="form.password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" placeholder="请再次输入密码"></td>
            </tr>
        </table>
        <div class="btn" @click="onSubmit">完成</div>
    </div>
</template>

<script setup>
import {registerApi} from "@/api/User";
import {reactive, ref} from "vue";
import router from "@/router";
import { useStore } from 'vuex';

const store = useStore();

const man_value = ref('')
const woman_value = ref('')

const form = reactive({
  phone: '',
  password: '',
  realname: '',
  birthday: '',
  sex: '0',
  identitycard: '',
})

const onSubmit = async () => {
    if(man_value=='on'){
        form.sex = '1'
    }else{
        form.sex = '0'
    }
    store.dispatch('register', form)
    if(store.getters.loggedIn){
        router.push('/hospital')
    }

}
</script>

<style src="../assets/css/register.css" scoped>
</style>